<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import * as echarts from 'echarts'

  require('echarts/theme/macarons')
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },

      funnelData: {
        type: Array,
        default: function () {
          return []
        }
      },
      height: {
        type: String,
        default: '350px'
      }
    },
    data() {
      return {
        chart: null,
        legend: [],
        list: [],
        myData: []
      }
    },
    watch: {
      myData: {
        handler(newV, oldV) {
          if (newV.length != 0) {
            // console.log(321)

            this.legend = newV[0]

            let list = newV.slice(1)

            let result = []

            list.forEach((item, index) => {
              let obj = {}
              obj.value = item[2]
              obj.name = item[0]
              obj.reaVal = item[1]
              result.push(obj)

            })

            this.list = result

            this.initChart()

          }

        },
        deep: true
      },

    },
    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.myData = this.funnelData

        }, 500)
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, "macarons")

        let colors = ['#2da9ff', '#7cc5ff', '#CCCC00', '#663333', '#FF0033', '#66FF66']

        this.chart.setOption({

          title: {
            text: "专利价值评分分布"
          },
          color: colors,

          series: [
            {
              zlevel: 1,
              name: '漏斗图',
              type: 'funnel',
              left: '10%',
              top: 60,

              bottom: 60,
              width: '60%',

              min: 0,
              max: 120,
              minSize: '0%',
              maxSize: '100%',
              sort: 'ascending',
              gap: 2,
              label: {
                show: true,
                position: 'right',
                width: '200px',
                align: 'right',
                formatter: function (params) {
                  return params.data.name + ' : ' + params.data.reaVal + '件';
                }
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  fontSize: 20
                }
              },
              data: this.list
            }
          ]
        })
      }
    }
  }
</script>
